<template>
	<view class="rows">
		<view class="page" :style="{height: `calc(100vh - 55px - ${safeBottom}px)`}">
			<Home v-show="page === 1" @update="$refs.userRef.getUserInfo()"></Home>
			<User v-show="page === 2" ref="userRef"></User>
		</view>
		<view class="tabs">
			<view class="tab">
				<view 
					class="tab-item" 
					:class="{active: page === 1}"
					@click="page = 1">
					<image :src="page === 1 ? '/static/tabBar/home-active.svg' : '/static/tabBar/home.svg'" mode="aspectFill"></image>
					<text>首页</text>
				</view>
				<view 
					class="tab-item" 
					:class="{active: page === 2}"
					@click="page = 2">
					<image :src="page === 2 ? '/static/tabBar/user-active.svg' : '/static/tabBar/user.svg'" mode="aspectFill"></image>
					<text>我的</text>
				</view>
			</view>
			<u-safe-bottom />
		</view>
	</view>
</template>

<script>
	import Home from '../components/home/home.vue'
	import User from '../components/user/user.vue'
	const safeBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
	export default {
		data() {
			return {
				page: 1,
				safeBottom,
			}
		},
		components: {
			Home,
			User
		}
	}
</script>

<style lang="scss" scoped>
	.rows{
		width: 100vw;
		height: 100vh;
		background-color: #f7f7f7;
		.page{
			width: 100%;
		}
		.tabs{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			.tab{
				width: 100%;
				height: 55px;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.tab-item{
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 8rpx;
					}
					text{
						font-size: $fs-26;
						color: #515151;
					}
					&.active{
						text{
							color: $primary;
						}
					}
				}
			}
		}
	}
</style>
